<template>
  <div class="block">
    <el-table
        :data="tableData.filter(data => !search || data.email.toLowerCase().includes(search.toLowerCase()) || data.id.includes(search)).slice((currentPage-1)*page_size,currentPage*page_size)"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          type="selection"
          width="30">
      </el-table-column>
      <el-table-column
          prop="id"
          label="id"
          width="80">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          width="180">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名"
          width="150">
        <template slot-scope="scope">
          <el-input v-model="scope.row.username">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
          prop="role"
          label="用户角色"
          width="150">
        <template slot-scope="scope">
          <el-select v-model="scope.row.role" placeholder="请选择" @change="changeRole(scope.row.id, scope.row.role)">
            <el-option
                v-for="role in roles"
                :key="role.value"
                :label="role.label"
                :value="role.value"
                :disabled="role.disabled">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          prop="create"
          label="注册时间">
      </el-table-column>
      <el-table-column
          prop="update"
          label="更新时间">
      </el-table-column>

      <el-table-column
          prop="ban"
          label="封禁状态"
          width="180">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.ban"
                     active-text="封禁"
                     inactive-text="未封禁"
                     active-color="">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="mute"
          label="禁言状态"
          width="180">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mute"
                     active-text="禁言"
                     inactive-text="未禁言">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column
          align="right">
        <template slot="header">
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <!--          <el-button-->
          <!--              size="mini"-->
          <!--              type="warning"-->
          <!--              @click="handleBan(scope.$index, scope.row)">封禁-->
          <!--          </el-button>-->
          <!--          可能可以采用开关的方式-->
          <!--          <el-switch-->
          <!--              v-model="scope.row.ban"-->
          <!--              active-color="#13ce66"-->
          <!--              inactive-color="#ff4949">-->
          <!--          </el-switch>-->
          <!--          <el-button-->
          <!--              size="mini"-->
          <!--              type="info"-->
          <!--              @click="handleMute(scope.$index, scope.row)">禁言-->
          <!--          </el-button>-->
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <!--    <div style="margin-top: 20px">-->
    <!--      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
    <!--      <el-button @click="toggleSelection()">取消选择</el-button>-->
    <!--    </div>-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="page_size"
        layout="prev, pager, next, jumper"
        :total="1000">
    </el-pagination>
    <el-button type="primary" @click="addRow"></el-button>
  </div>
</template>

<script>
import {list_users, change_role, change_ban, change_mute} from "@/api/manager";

export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    tableRowClassName({rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleBan(index, row) {
      console.log(index, row);
    },
    handleMute(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    changeRole(id, role) {
      change_role(this.$store.getters.getToken, id, role)
    },
    changeBan(id, ban) {
      change_ban(this.$store.getters.getToken, id, ban)
    },
    changeMute(id, mute) {
      change_mute(this.$store.getters.getToken, id, mute)
    },
    addRow() {
      let data = {
        id: '1234',
        email: '820585042@qq.com',
        username: '王小虎',
        create: '',
        update: '',
        role: '用户',
        ban: 'test',
        mute: 'test',
        edit: false
      };
      this.tableData.push(data)
    }
  },
  getData() {
    // 首先通过调用接口获取数据
    let data = {}
    list_users(this.$store.getters.getToken).then(response => {
      let data = response.data;
      if (data.code == 200) {
        this.tableData = data.data;
      }
    })
    // 直接给tableData赋值
    this.tableData = data
    // 或者转换一下格式
  },
  data() {
    return {
      currentPage: 1,
      page_size: 100,
      tableData: [{
        id: '1234',
        email: '820585042@qq.com',
        username: '王小虎',
        create: '',
        update: '',
        role: '用户',
        ban: 'test',
        mute: 'test',
        edit: false
      },],
      search: '',
      roles:
      // []
          [{value: 5, label: "系统管理员", disable: true},
            {value: 4, label: "帐号管理员"},
            {value: 3, label: "社区管理员"},
            {value: 2, label: "游戏管理员"},
            {value: 1, label: "用户"}],
      role_value: this.$store.getters.getRole,
    };

  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.block {
  color: black;
}
</style>